<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>列表过滤-计算属性实现</title>
    <script type="text/javascript" src="../js/vue.js"></script>
    <script type="text/javascript">
      Vue.config.productionTip = false;
    </script>
  </head>
  <body>
    <div id="root">
      <h2>人员列表</h2>
      <input type="text" placeholder="请输入名字筛选" v-model="inputName" />
      <ul>
        <li v-for="p in filPersons" :key="p.id">{{p.name}}-{{p.age}}</li>
      </ul>
    </div>
  </body>

  <script type="text/javascript">
    const vm = new Vue({
      el: "#root",
      data: {
        inputName: "",
        //原数据不能动！后续还要还原
        persons: [
          {
            id: "001",
            name: "张三",
            age: 18,
          },
          {
            id: "002",
            name: "张思",
            age: 20,
          },
          {
            id: "003",
            name: "李四",
            age: 22,
          },
          {
            id: "004",
            name: "李武",
            age: 28,
          },
        ],
      },
      computed: {
        //计算属性实现，不需要再创建属性接收，依赖于return返回值
        filPersons() {
          //数组和输入值过滤对比
          return this.persons.filter(e => {
           return e.name.indexOf(this.inputName) !== -1;
          });
        },
      },
    });
  </script>
</html>
